<template>
  <d2-container>
    <div class="flex-1 ml-2 mt-2">
      <div class="font-s-3 font-w flex-1 pb-2 border-bottom row-ac">
        <div class="mr-5">敏感词列表</div>
        <el-button type="warning" size="mini" @click="addWord" icon="el-icon-plus">添加敏感词</el-button>
      </div>

      <div class="flex-1 row-ac-fw mt-3">
        <div class="mr-3 cp" v-for="(item,index) in sensitivewordList" :key="index">
          <el-popover placement="top-start" width="60" trigger="hover">
            <div class="row-ab">
              <div class="row-ac cp" @click="toSetup(item.id)">
                <div class="iconfont icon-shezhi"></div>
                <div class="font-s-2 ml">设置</div>
              </div>
              <div class="row-ac cp" @click="openDelete(item.id)">
                <div class="iconfont icon-shanchu ml-3"></div>
                <div class="font-s-2 ml">删除</div>
              </div>
            </div>
            <el-button slot="reference">{{ item.word }}</el-button>
          </el-popover>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="30%" title="产地">
      <el-form :model="formWord" ref="form" label-width="80px">
        <el-form-item label="敏感词" prop="word">
          <div style="width: 60%;">
            <el-input v-model="formWord.word"></el-input>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </d2-container>
</template>

<script>
  import {
    sensitivewordListUrl,
    sensitivewordDetailUrl,
    sensitivewordCreateUrl,
    sensitivewordUpdateUrl,
    sensitivewordDeleteUrl,
  } from '@/utils/interface'
  export default {
    data() {
      return {
        dialogVisible: false,
        addStatus: false,
        sensitivewordList: [],
        formWord: {
          word: ''
        },
        getWordId:''
      }
    },
    mounted() {
      this.getSensitivewordList()
    },
    methods: {
      getSensitivewordList() {
        this.$get(sensitivewordListUrl).then(res => {
          console.log(res.data);
          if (res.data.code == 200) {
            this.sensitivewordList = res.data.data.list
          }
        })
      },
      toSetup(itemId) {
        this.dialogVisible = true
        this.addStatus = true
        this.getWordId = itemId
        this.$get(sensitivewordDetailUrl + itemId + '/').then(res => {
          if (res.data.code == 200) {
            this.formWord = {
              word: res.data.data.word
            }
          }
        })
      },
      addWord(){
        this.dialogVisible = true
        this.addStatus = false
      },
      submitForm() {
        if(this.addStatus){
          this.$put(sensitivewordUpdateUrl + this.getWordId + '/', this.formWord).then(res=>{
            if (res.data.code == 200) {
              this.dialogVisible = false
              this.formWord = {}
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
              this.getSensitivewordList()
            }
          })
        }else{
          this.$post(sensitivewordCreateUrl, this.formWord).then(res=>{
            if (res.data.code == 200) {
              this.dialogVisible = false
              this.formWord = {}
              this.$message({
                type: 'success',
                message: '添加成功!'
              });
              this.getSensitivewordList()
            }
          })
        }
      },
      openDelete(wordId) {
        this.$confirm('此操作将永久删除该路由, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 在确定时执行handleDelete的删除
          this.$del(sensitivewordDeleteUrl + wordId + '/').then(res => {
            if (res.data.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getSensitivewordList()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  }
</script>

<style lang="scss">

</style>
